<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .page {
            width: 500px;
            height: 30px;
            margin: 20px auto;
        }

        .page span {
            float: left;
            width: 60px;
            height: 30px;
            background-color: #594d64;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            margin-left: 5px;
        }

        .page ul {
            float: left;
        }

        .page ul li {
            float: left;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #160c05;
            color: #ffffff;
            margin-left: 5px;
        }

        .page .disabled {
            background-color: #cdcdcd;
        }

    </style>
</head>
<body>
<div id="box">


</div>
<div id="box2">


</div>
</body>
<script>
    function Page(ele, opt) {
        this.pageIndex = 1;
        this.option = {
            total: 100,//数据总数
            shownum: 50,//每页显示的数
            showpage: 5,//连续出现的页码数
            callBack: function () {

            }
        }
        this.target = document.querySelector(ele);
        this.extend(opt);
        this.create();//生成结构
        this.bindData();//绑定数据

    }
    Page.prototype.extend = function (opt) {
        for (var i  in opt) {
            this.option[i] = opt[i];
        }
    }
    Page.prototype.bindEvent = function () {
        var that = this;
        this.prevBtn.className = "page-prev";
        this.prevBtn.onclick = function () {
            that.pageIndex--;
            that.bindData();
        }
        this.nextBtn.className = "page-next";
        this.nextBtn.onclick = function () {
            that.pageIndex++;
            that.bindData();
        }

    }
    Page.prototype.bindData = function () {
        var that = this;
        var allPage = Math.ceil(this.option["total"] / this.option["shownum"]);//获取所有的页码总数 10
        var middleNum = Math.floor(this.option["showpage"] / 2);// 2
        var start = 1;
        var end = this.option["showpage"]//默认的开始和结束 5
        end = allPage > end ? end : allPage;//页码处理

        start = this.pageIndex > middleNum ? this.pageIndex - middleNum : start; //起点
        end = this.pageIndex > middleNum ? this.pageIndex + middleNum : end;//中点
        //难点 在于页码的算法
        end = this.pageIndex > (allPage - middleNum) ? allPage : end;//大于8 终点就是10  起点?
        start = this.pageIndex > (allPage - middleNum) ? allPage - middleNum * 2 : start;
        start = start < 1 ? 1 : start;//处理数据特别少的时候

        this.content.innerHTML = "";
        for (var i = start; i <= end; i++) {
            var li = document.createElement("li");
            li.innerHTML = i;
            if (i == this.pageIndex) {
                li.style.backgroundColor = "#4478FF";
            }
            this.content.appendChild(li);
            li.onclick = function () {
                that.pageIndex = this.innerHTML * 1;//设置页码
                that.bindData();//当页码发生改变的时候 重新生成
            }
        }
        this.bindEvent(); //先绑定 在取消
        if (this.pageIndex == 1) {//第一页的时候上一页不能使用
            this.prevBtn.onclick = null;
            this.prevBtn.className = "page-prev disabled";
        }
        if (this.pageIndex == allPage) {
            this.nextBtn.onclick = null;
            this.nextBtn.className = "page-next disabled";
        }
        if (this.option["callBack"]) {
            this.option["callBack"](this.pageIndex);
        }


    }
    Page.prototype.create = function () {
        this.target.innerHTML = "";
        this.target.className = "page";
        this.prevBtn = document.createElement("span");
        this.prevBtn.className = "page-prev";
        this.prevBtn.innerHTML = "上";
        this.target.appendChild(this.prevBtn);

        this.content = document.createElement("ul");
        this.content.className = "page-content";
        this.target.appendChild(this.content);

        this.nextBtn = document.createElement("span");
        this.nextBtn.className = "page-next";
        this.nextBtn.innerHTML = "下";
        this.target.appendChild(this.nextBtn);

    }

    function myPage(ele, json) {
        return new Page(ele, json);
    }
    myPage("#box", {
        total: 20,//数据总数
        shownum: 5,//每页显示的数
        showpage: 7,//连续出现的页码数
        callBack: function (pageIndex) {
            alert("请求第" + pageIndex + "页的数据");
        }
    })
    myPage("#box2", {
        total: 10,//数据总数
        shownum: 2,//每页显示的数
        showpage: 5,//连续出现的页码数
        callBack: function (pageIndex) {
            alert("1请求第" + pageIndex + "页的数据");
        }
    })

    //    new DatePicker("#start", {"dateFormat": "mm-dd-yyyy"});
    //    new DatePicker("#end", {"dateFormat": "yyyy年mm月dd日", "date": "2017-10-01"});
</script>
</html>